6
6
.
.
4
4
V
V
i
i
e
e
w
w
s
s
-
-
B
B
a
a
s
s
i
i
c
c
O
O
p
p
e
e
r
r
a
a
t
t
i
i
o
o
n
n
s
s
C
C
r
r
e
e
a
a
t
t
e
e
N
N
e
e
w
w
F
F
i
i
l
l
e
e
File - New - File… - iOS - User Interface - SwiftUI View (or Swift File) - Save as: ContentView.swift (any Name)
Basic Screen (Root View)
struct ContentView : View {
var body : some View { Text("Hello World") } //Computed Property : Data Type { getter code }
}
Explicit getter & return
struct ContentView : View {
var body : some View { get { return Text("Hello World") } }
}
A
A
d
d
d
d
V
V
i
i
e
e
w
w
Type inside Code or drag and drop from Library into Code or Design View
Add a Button into an existing Vertical Stack
E
E
d
d
i
i
t
t
V
V
i
i
e
e
w
w
P
P
r
r
o
o
p
p
e
e
r
r
t
t
i
i
e
e
s
s
Type inside Code, use Attributes Inspectors or Automatic Preview Popup (Command + Click - Show SwiftUI Inspector)
Edit View Properties
V
V
i
i
e
e
w
w
M
M
o
o
d
d
i
i
f
f
i
i
e
e
r
r
s
s
View Modifiers are structures which allow you to apply the same style to multiple Views or other Modifiers.
Apply Modifier to View
struct ContentView: View {
struct LabelStyle : ViewModifier {
func body(content: Content) -> some View {
return content
.foregroundColor(Color.red)
.shadow(color: Color.black, radius: 2, x: 2, y: 2)
.font(Font.custom("Arial Rounded MT Bold", size: 18))
}
}
var body: some View {
Text("Score").modifier(LabelStyle())
}
}
Apply Modifier to Modifier
struct ContentView: View {
struct ShadowStyle : ViewModifier {
func body(content: Content) -> some View {
return content
.shadow(color: Color.black, radius: 2, x: 2, y: 2)
}
}
struct LabelStyle: ViewModifier {
func body(content: Content) -> some View {
return content
.modifier(ShadowStyle())
.foregroundColor(Color.red)
.font(Font.custom("Arial Rounded MT Bold", size: 18))
}
}
struct ValueStyle: ViewModifier {
func body(content: Content) -> some View {
return content
.modifier(ShadowStyle())
.foregroundColor(Color.black)
.font(Font.custom("Arial Rounded MT Bold", size: 24))
}
}
var body: some View {
HStack {
Text("Score:").modifier(LabelStyle())
Text(String("10")).modifier(ValueStyle())
}
}
}
